<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="">
<meta name="author" content="ThemeBucket">
<link rel="shortcut icon" type="../image/png">
<title>已完成订单</title>
<link rel="stylesheet"
	href="${ctxPath}/static/js/data-tables/DT_bootstrap.css" />
<link rel="stylesheet" type="text/css"
	href="${ctxPath}/static/js/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" />
<link href="${ctxPath}/static/css/style.css" rel="stylesheet">
<link href="${ctxPath}/static/css/style-responsive.css" rel="stylesheet">
<link rel="shortcut icon" type="image/x-icon"
	href="${ctxPath }/static/images/lukebang320.ico" media="screen" />
<link rel="icon" href="${ctxPath }/static/images/lukebang320.ico"
	type="image/x-icon" />
<link rel="bookmark" href="${ctxPath }/static/images/lukebang320.ico"
	type="image/x-icon" />
<link href="${ctxPath}/static/js/fancybox/source/jquery.fancybox.css"
	rel="stylesheet" type="text/css" />
<link href="${ctxPath}/static/js/bootstrap-table/bootstrap-table.css"
	rel="stylesheet" />
<style type="text/css">
td {
	text-align: center;
}

th {
	text-align: center;
}

.modal {
	overflow-y: auto;
}

.modal-open {
	overflow: auto;
}
</style>
</head>
<body class="sticky-header"
	onload="indexmenu('${oneMenu}','${twoMenu}');">
	<%@ include file="../index/index.jsp"%>
	<section>
		<div class="main-content" style="overflow-y: auto">
			<!-- 地址栏-->
			<div class="page-heading">
				<h3>鹿客帮下单版</h3>
				<ul class="breadcrumb">
					<li><a>我的订单</a></li>
					<li class="active">测量订单</li>
				</ul>
			</div>
			<!--这里是写一些内容的  -->
			<section class="panel">
				<header class="panel-heading custom-tab turquoise-tab">
					<ul class="nav nav-tabs">
						<li class=""><a onclick="clickOrders(0,'pay')">未付款</a></li>
						<li class=""><a onclick="clickOrders(0,'taking')">等待工人接单</a></li>
						<li class=""><a onclick="clickOrders(0,'order')">工人已接单</a></li>
						<li class=""><a onclick="clickOrders(0,'move')">工人已出发</a></li>
						<li class="active"><a onclick="clickOrders(0,'done')">已完成</a></li>
					</ul>
				</header>
				<div class="panel-body">
					<div class="panel panel-default" style="border-bottom-width: 0px">
						<div class="panel-heading">查询条件</div>
						<form id="queryConditionForm">
							<table
								class="table table-striped table-bordered table-hover table-checkable"
								style="border-width: 0" id="datatable_ajax">
								<thead>
									<tr role="row" class="heading">
										<th align="center" width="5%">订单ID</th>
										<th width="8%">顾客姓名</th>
										<th width="8%">顾客手机号</th>
										<th width="15%">预约时间</th>
										<th width="15%">下单日期</th>
										<th width="5%">操作</th>
									</tr>
									<tr role="row" class="filter">
										<td><input type="text"
											class="form-control form-filter input-sm" name="indentID">
										</td>
										<td><input type="text"
											class="form-control form-filter input-sm" name="cuName"
											placeholder="顾客姓名"></td>
										<td>
											<div style="margin-bottom: 5px">
												<input type="text"
													class="form-control form-filter input-sm margin-bottom-5 clearfix"
													name="cuPhone" placeholder="顾客手机号" />
											</div>
										</td>
										<td>
											<div class="input-group date form_datetime"
												style="margin-bottom: 5px" data-link-field="">
												<input class="form-control" size="16" type="text" value=""
													name="subscribeTimeBegin" placeholder="起始时间" readonly>
												<span class="input-group-addon"><span
													class="glyphicon glyphicon-remove"></span></span> <span
													class="input-group-addon"><span
													class="glyphicon glyphicon-calendar"></span></span>
											</div> <input type="hidden" id="" value="" />
											<div class="input-group date form_datetime"
												style="margin-bottom: 5px">
												<input class="form-control" size="16" type="text" value=""
													name="subscribeTimeEnd" placeholder="结束时间" readonly>
												<span class="input-group-addon"><span
													class="glyphicon glyphicon-remove"></span></span> <span
													class="input-group-addon"><span
													class="glyphicon glyphicon-calendar"></span></span>
											</div> <input type="hidden" value="" />
										</td>
										<td><div class="input-group date form_datetime"
												style="margin-bottom: 5px">
												<input class="form-control" size="16" type="text" value=""
													name="beginTimeBegin" placeholder="起始时间" readonly>
												<span class="input-group-addon"><span
													class="glyphicon glyphicon-remove"></span></span> <span
													class="input-group-addon"><span
													class="glyphicon glyphicon-calendar"></span></span>
											</div> <input type="hidden" id="dtp_input1" value="" />
											<div class="input-group date form_datetime"
												style="margin-bottom: 5px">
												<input class="form-control" size="16" type="text" value=""
													name="beginTimeEnd" placeholder="结束时间" readonly> <span
													class="input-group-addon"><span
													class="glyphicon glyphicon-remove"></span></span> <span
													class="input-group-addon"><span
													class="glyphicon glyphicon-calendar"></span></span>
											</div></td>
										<td>
											<div style="margin-bottom: 5px">
												<button style="width: 70px" id="button_refreshQuery"
													type="button"
													class="btn btn-sm green btn-outline filter-submit margin-bottom">
													<i class="fa fa-search"></i> 查询
												</button>
											</div>
											<button style="width: 70px" type="button"
												onclick="$('#queryConditionForm')[0].reset()"
												class="btn btn-sm red btn-outline filter-cancel">
												<i class="fa fa-times"></i> 重置
											</button>
										</td>
									</tr>
								</thead>
							</table>
						</form>
					</div>
					<div class="tab-content">
						<div id="noPayOrders" class="tab-pane active">
							<table id="tb_watingPayIndent"></table>
						</div>
						<!-- <div id="toolbar" class="btn-group">
							<button type="button" onclick="javascript:exportIndentExcel();"
								class="btn btn-default">
								<span class="glyphicon glyphicon-export" aria-hidden="true"></span>导出Excel
							</button>
						</div> -->
					</div>
				</div>
			</section>
		</div>
	</section>
	
	
	<!--  查看顾客的详细modal  -->
	<jsp:include page="merchantInfo.jsp"></jsp:include>
	<!--  详细测量信息的modal  -->
	<div class="modal fade" style="top: 20px;" id="viewMeasureDetailModal"
		tabindex="-1" role="dialog"
		aria-labelledby="viewMeasureDetailModalLabel" aria-hidden="true">
		<div class="modal-dialog" style="width: 80%">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="viewMeasureDetailModalLabel">查看详细的订单测量信息</h4>
				</div>
				<div class="modal-body">
					<table id="indentGoods_Table">
					</table>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
				</div>
			</div>
		</div>
	</div>
	<!--  详细测量信息的modal  -->
	<div class="modal fade" style="top: 50px;"
		id="exportExcelConditionModal" tabindex="-1" role="dialog"
		aria-hidden="true">
		<div class="modal-dialog" style="width: 500px">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title">导出订单信息</h4>
				</div>
				<div class="modal-body">
					<form id="exportExcelConditionForm"
						class="form-horizontal left-align form-well">
						<input type="hidden" name="type" value="1">
						<div class="form-group">
							<label class="col-md-3 col-sm-3 control-label">起始时间：</label>
							<div class="col-md-8 col-sm-8">
								<div class="input-group date form_datetime"
									style="margin-bottom: 5px" data-link-field="">
									<input class="form-control" size="16" type="text" value=""
										name="beginTime" placeholder="起始时间" readonly> <span
										class="input-group-addon"><span
										class="glyphicon glyphicon-remove"></span></span> <span
										class="input-group-addon"><span
										class="glyphicon glyphicon-calendar"></span></span>
								</div>
								<input type="hidden" id="" value="" />
							</div>
						</div>
						<div class="form-group">
							<label class="col-md-3 col-sm-3 control-label">结束时间：</label>
							<div class="col-md-8 col-sm-8">
								<div class="input-group date form_datetime"
									style="margin-bottom: 5px">
									<input class="form-control" size="16" type="text" value=""
										name="endTime" placeholder="结束时间" readonly> <span
										class="input-group-addon"><span
										class="glyphicon glyphicon-remove"></span></span> <span
										class="input-group-addon"><span
										class="glyphicon glyphicon-calendar"></span></span>
								</div>
								<input type="hidden" value="" />
							</div>
						</div>
						<div class="form-group">
							<label class="col-md-3 col-sm-3 control-label">订单类型：</label>
							<div>
								<div class="col-sm-8">
									<select class="form-control" name="status">
										<option value="-1">全部订单</option>
										<option value="1">未付款订单</option>
										<option value="999999">未接单订单</option>
										<option value="999999">已接单订单</option>
										<option value="999999">已出发订单</option>
										<option value="999999">已完成订单</option>
									</select>
								</div>
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-primary"
						onclick="javascript:exportExcel('${ctxPath}')"
						data-dismiss="modal">导出</button>
					<button type="button" class="btn btn-default" data-dismiss="modal" >关闭
					</button>
				</div>
			</div>
		</div>
	</div>
	<iframe name="downloadFrame" style="display: none"></iframe>
</body>
<script type="text/javascript"
	src="${ctxPath}/static/js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript"
	src="${ctxPath}/static/js/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>

<script type="text/javascript"
	src="${ctxPath}/static/js/orders/public.js"></script>
<script type="text/javascript"
	src="${ctxPath}/static/js/taskManage/public.js"></script>
<!-- tables插件的引用 -->
<script src="${ctxPath}/static/js/bootstrap-table/bootstrap-table.js"></script>
<script
	src="${ctxPath}/static/js/fancybox/source/jquery.fancybox.pack.js"
	type="text/javascript"></script>
<script
	src="${ctxPath}/static/js/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
<script type="text/javascript"
	src="${ctxPath}/static/js/custom/taskList/common.js"></script>
<!--pickers initialization-->
<script type="text/javascript">
	var TableInit = function() {
		var oTableInit = new Object();
		//初始化Table
		oTableInit.Init = function() {
			$('#tb_watingPayIndent')
					.bootstrapTable(
							{
								url : '${ctxPath}/indent/queryMeasureIndentByMerchant', //请求后台的URL（*）
								method : 'post', //请求方式（*）
								toolbar : '#toolbar', //工具按钮用哪个容器
								striped : true, //是否显示行间隔色
								cache : false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
								pagination : true, //是否显示分页（*）
								sortable : false, //是否启用排序
								sortName : 'beginTime',
								sortOrder : "desc", //排序方式
								queryParams : oTableInit.queryParams,//传递参数（*）
								sidePagination : "server", //分页方式：client客户端分页，server服务端分页（*）
								pageNumber : 1, //初始化加载第一页，默认第一页
								pageSize : 8, //每页的记录行数（*）
								pageList : [ 8, 25, 50, 100 ],
								search : false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
								strictSearch : false,
								showColumns : false, //是否显示所有的列
								showRefresh : true, //是否显示刷新按钮
								minimumCountColumns : 2, //最少允许的列数
								clickToSelect : false, //是否启用点击选中行
								height : 600, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
								uniqueId : "indentId", //每一行的唯一标识，一般为主键列
								showToggle : true, //是否显示详细视图和列表视图的切换按钮
								cardView : false, //是否显示详细视图
								detailView : false, //是否显示父子表
								contentType : 'application/x-www-form-urlencoded; charset=UTF-8',
								columns : [
										{
											field : 'indentId',
											title : '订单ID',
											width : '3%',
											align : "center"
										},
										{
											field : 'beginTime',
											title : '下单时间',
											width : '12%',
											align : "center"
										},
										{
											field : 'subscribeTime',
											title : '预约时间',
											width : '12%',
											align : "center"
										},
										{
											field : 'roomNumB',
											title : '测量房间数',
											width : '7%',
											align : "center"
										},
										{
											field : 'relievedBao',
											title : '安心宝',
											width : '5%',
											align : "center",
											formatter : function(value, row,
													index) {
												if (value == 1) {
													return '已买';
												} else {
													return '未买';
												}
											}
										},
										{
											field : 'addPrice',
											title : '悬赏费用',
											width : '7%',
											align : "center"
										}, 
										{
											field : 'indentPrice',
											title : '订单价格',
											width : '7%',
											align : "center",
											formatter : function(value, row,
													index) {
												return value;

											}
										},
										{
											field : 'merchantsPrice',
											title : '订单总价',
											width : '7%',
											align : "center",
											formatter : function(value, row,
													index) {
												return value;
											}
										},
										{
											field : 'remark',
											title : '订单备注',
											width : '20%',
											align : "center"
										},
										{
											field : 'customerAddress.name',
											title : '顾客姓名',
											width : '7%',
											align : "center"
										},
										{
											field : 'tag',
											title : '顾客详细信息',
											width : '10%',
											align : "center",
											formatter : function(value, row,
													index) {
												return "<button class='btn btn-success btn-xs' onclick='javascript:viewCustomerDetialModalOpen("
														+ row.indentId
														+ ")'>查看顾客信息</button>";
											}
										},
										{
											field : 'tag2',
											title : '查看测量详细信息',
											width : '15%',
											align : "center",
											formatter : function(value, row,
													index) {
												return "<button class='btn btn-success btn-xs'  onclick='javascript:viewMeasureDetailModalOpen("
																+ row.indentId
																+ ")'>查看详细测量信息</button>";
											}
										},
										{
											field : 'tag2',
											title : '自动转安装',
											width : '15%',
											align : "center",
											formatter : function(value, row,
													index) {
												console.log(row)
												if(row.isInstalled==0){
													return "<button class='btn btn-success btn-xs' onclick='javascript:autoInstallIndent("
													+ row.indentId
													+ ")'>自动转安装</button>";
												}else{
													return "<button class='btn  btn-xs' disabled='disabled'>自动转安装</button>";
												}
											}
										}
										]
							});
		};

		//得到查询的参数
		oTableInit.queryParams = function(params) {
			var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
				limit : params.limit, //页面大小
				offset : params.offset, //页码
				order : params.order,
				sort : params.sort,
				indentID : $("input[name='indentID']").val(),
				subscribeTimeBegin : $("input[name='subscribeTimeBegin']")
						.val(),
				subscribeTimeEnd : $("input[name='subscribeTimeEnd']").val(),
				beginTimeBegin : $("input[name='beginTimeBegin']").val(),
				beginTimeEnd : $("input[name='beginTimeEnd']").val(),
				cuName : $("input[name='cuName']").val(),
				cuPhone : $("input[name='cuPhone']").val(),
				indentStatus : 2,
			};
			return temp;
		};
		return oTableInit;
	};
	$(function() {
		//1.初始化Table
		var oTable = new TableInit();
		oTable.Init();
		$('.form_datetime').datetimepicker({
			language : 'zh-CN',
			format : "yyyy-mm-dd hh:ii:ss",
			weekStart : 1,
			todayBtn : 1,
			autoclose : 1,
			todayHighlight : 1,
			startView : 2,
			forceParse : 0,
			showMeridian : 0
		});
		$('.form_date').datetimepicker({
			//language : 'fr',
			weekStart : 1,
			todayBtn : 1,
			autoclose : 1,
			todayHighlight : 1,
			startView : 2,
			minView : 2,
			forceParse : 0
		});
		$('.form_time').datetimepicker({
			//language : 'fr',
			weekStart : 1,
			todayBtn : 1,
			autoclose : 1,
			todayHighlight : 1,
			startView : 1,
			minView : 0,
			maxView : 1,
			forceParse : 0
		});
		$("#button_refreshQuery").click(function() {
			var opt = {
				pageNumber : 1,
				query : {
					offset : 0
				}
			};
			//从新开始计数
			$("#tb_watingPayIndent").bootstrapTable('refresh', opt);
		});
		$('#indentGoods_Table')
				.bootstrapTable(
						{
							height : 500,
							columns : [
									{
										field : 'type_script',
										title : '测量基本信息',
										align : "center",
										width : "10%",
										formatter : function(value, row, index) {
											if (row.type == 0) {
												return "房间：" + row.goodForRoom
														+ "<br/>品种：布艺帘";
											} else {
												return "房间：" + row.goodForRoom
														+ "<br/>品种：成品帘";
											}
										}
									},
									{
										field : 'good',
										title : '安装信息',
										align : "center",
										width : "12%",
										formatter : function(value, row, index) {
											if (value.type == 0) {
												return "结构："
														+ value.structureStr
														+ "<br/>款式："
														+ value.styleStr
														+ "<br/>类型："
														+ row.goodSpecialTypeStr;

											} else {
												return "类型："
														+ row.goodSpecialTypeStr;
											}
										}
									},
									{
										field : 'type',
										title : '款式信息',
										align : "left",
										width : "25%",
										formatter : function(value, row, index) {
											var accStr = "";
											// 如果是布尺寸或者纱尺寸
											if (value == 0 || value == 1) {
												if (typeof row.acc == 'undefined') {
													accStr = "无装饰头";
												} else {
													accStr = row.acc;
												}
												return "窗户打开方式：" + row.window
														+ "<br/>布帘安装位置："
														+ row.installSite
														+ "<br/>布帘配件："
														+ row.accessoriesType
														+ "，" + accStr
														+ "<br/>安装方式："
														+ row.pinstallSite
														+ "<br/>安" + "装配件："
														+ row.panzhuangfangshi;
											}
											// 如果是帘头
											else if (value == 2) {
												return "帘头安装情况："
														+ row.installSite
														+ "<br/>帘头配件："
														+ row.accessoriesType;
											}
											// 如果是成品帘
											else {
												return "窗户打开方式：" + row.window
														+ "<br/>安装配件："
														+ row.accessoriesType
														+ "<br/>安装方式："
														+ row.pinstallSite;
											}

										}
									},
									{
										field : 'type',
										title : '尺寸信息',
										align : "center",
										width : "200px",
										formatter : function(value, row, index) {
											// 如果是布尺寸或者纱尺寸
											if (value == 0 || value == 1) {
												return "宽：" + row.wide
														+ "（米），高：" + row.high
														+ "（米）" + "<br/>杆长："
														+ row.wide + "（米）";
											}
											// 如果是帘头
											else if (value == 2) {
												return "宽：" + row.wide
														+ "（米），配件长度："
														+ row.saleNumber;
											}
											// 如果是成品帘
											else {
												return "宽：" + row.wide
														+ "（米），高：" + row.high
														+ "（米）";
											}
										}
									},
									{
										field : 'remark',
										title : '备注',
										width : "15%",
										align : "center"
									},
									{
										field : 'pictures',
										title : '安装拍照',
										align : "left",
										width : "150px",
										formatter : function(value, row, index) {
											var returnVal = "";
											$
													.each(
															value,
															function(index,
																	valueChild) {
																returnVal = returnVal
																		+ '<a href="http://okwc9gyzs.bkt.clouddn.com/'
																		+ valueChild.img
																		+ '?imageView2/1/w/800/h/600/q/70"  class="fancybox-button"> <img src="http://okwc9gyzs.bkt.clouddn.com/'
																		+ valueChild.img
																		+ '?imageView2/1/w/40/h/30/q/70"    alt="" /></a>';

															});
											return returnVal;
										}
									} ]
						});
	});
	//查看那个订单的那个用户
	function viewCustomerDetialModalOpen(id) {
		var viewRow = $('#tb_watingPayIndent').bootstrapTable(
				'getRowByUniqueId', id);
		$("#viewCustomerDetialModal #txt_customerName").val(
				viewRow.customerAddress.name);
		$("#txt_customerPhoneNumber").val(viewRow.customerAddress.phone);
		$("#txt_customerAddress").val(viewRow.customerAddress.customerAddress);
		$("#txt_customerRemark").val(viewRow.remark);
		$('#viewCustomerDetialModal').modal('show');
	}
	function viewMeasureDetailModalOpen(indentID) {
		$.post('${ctxPath}/good/queryIndentGoodPartsByIndent', {
			indentID : indentID
		}, function(data) {
			$('#indentGoods_Table').bootstrapTable('load', data.goodPart);
			var beginNum = 0;
			$.each(data.collapseNumbers, function(index, valueChild) {
				$('#indentGoods_Table').bootstrapTable('mergeCells', {
					index : beginNum,
					field : 'type_script',
					rowspan : valueChild,
				});
				beginNum = beginNum + valueChild;
			})
			$(".fancybox-button").fancybox({
				type : 'image',
				helpers : {
					title : {
						type : 'float'
					}
				}
			});
		});
		$('#viewMeasureDetailModal').modal('show');
	}
	//自动转安装
	function autoInstallIndent(indentId){
		//alert("自动转安装噜啦啦");
		if(! indentId)return;
		$.get(
				"${ctxPath}/indent/toInstallIndent",
					{
						mesureIndentId:indentId
					},
					function(data){
						//alert("自动转安装返回信息："+JSON.stringify(data))
						if(data.status=="0"){
							toastr.success(data.message);
							$("button[name='refresh']").trigger("click");
						}else{
							toastr.error(data.message);
						}
				});	
	}
	function exportIndentExcel() {
		$("#exportExcelConditionModal").modal('show');
	}
</script>
</html>
